<template>
  <div class="cpn-score-display list" v-if="list.length">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="{ [itemClassName]: true, 'is-ellipsis': isEllipsis }"
      :style="itemStyle"
    >
      <el-popover
        placement="top"
        trigger="hover"
        v-if="item.children && item.children.length > 0"
        ref="scorePopoverRef"
      >
        <div class="material-tab">
          <div
            class="material-item item-special"
            v-for="sub in item.children"
            :key="sub.chkitemId"
            :class="sub.scoreInput | scoreClass"
          >
            <div v-if="!sub.children || !sub.children.length" class="item-cursor" @click="clickItem(sub)">
              <div>{{ sub.chkitemName }}</div>
              <div>{{ sub.scoreInput || '/' }}</div>
            </div>
            <div v-else class="material-item-type">
              <div>
                <div>{{ sub.chkitemName }}</div>
                <div>{{ sub.scoreInput || '/' }}</div>
              </div>
              <div class="type-line" />
              <div class="gc-bs">
                <div
                  v-for="(type, tyindex) in sub.children"
                  :key="'yt'+ tyindex"
                  class="label-value"
                  @click="clickItem(sub, type)"
                >
                  <span>{{ type.productType | productType }}</span>
                  <span> {{ type.scoreInput || '/' }} </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="reference" class="item">
          <div class="label" :title="item.chkitemName">{{ item.chkitemName }}</div>
          <div class="num-score">
            <div class="flex-x-center muted score-box">
              <span>得分：{{ item.scoreInput }}{{ item.scoreType === SCORE_TYPE.PERCENT ? '%' : '分' }}</span>
              <dict-tag class="m-l-sm" :options="dict.type.cq_eval_score_level" :value="item.scoreLevel" />
              <dict-tag class="m-l-sm" :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
            </div>
          </div>
        </div>
      </el-popover>
      <div v-else class="item" @click="clickItem(item)">
        <div class="label" :title="item.chkitemName">{{ item.chkitemName }}</div>
        <div class="num-score">
          <div class="flex-x-center muted score-box">
            <span
              v-if="item.chkitemCode !== JZ_SCORE_TYPE.FSL && item.chkitemCode !== TJ_SCORE_TYPE.FSL"
              style="margin-right: 10px;"
            >得分：{{ item.scoreInput }}分</span>
            <dict-tag :options="dict.type.cq_eval_score_level" :value="item.scoreLevel" />
            <dict-tag class="m-l-sm" :options="dict.type.cq_eval_result_enum" :value="item.scoreResult" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 得分展示
import {
  CQ_EVAL_DATA_TYPE as DATA_TYPE,
  CQ_EVAL_SCORE_TYPE as SCORE_TYPE,
  CQ_EVAL_ADDSUB_OBJ as ADDSUB_OBJ,
  CQ_EVAL_RESULT_ENUM as RESULT,
  cqProductType
} from '@/utils/baseData'
import {JZ_SCORE_TYPE, TJ_SCORE_TYPE} from '../baseData'

export default {
  name: 'ScoreDisplay',
  filters: {
    scoreClass(val) {
      if (!val) return ''
      if (val === 'A' || val >= 90) return 'green'
      if (val === 'B' || (val < 90 && val >= 80)) return 'blue'
      if (val === 'C' || val < 80) return 'red'
      return ''
    },
    productType(val) {
      let str = val
      for (let i = 0; i < cqProductType.length; i++) {
        if (cqProductType[i].value === val) {
          str = cqProductType[i].label
        }
      }
      return str
    }
  },
  props: {
    value: {type: Object, default: () => ({})},
    cfg: {type: Object, default: () => ({})},
    showThrowTerm: {type: Boolean, default: false}, // 显示甩项
    showRemark: {type: Boolean, default: false}, // 显示备注内容
    itemClassName: {type: String, default: ''},
    itemStyle: {type: Object, default: () => ({})},
    calculate: {type: String, default: () => ''},
    isEllipsis: {type: Boolean, default: false} // 描述溢出省略
  },
  dicts: ['cq_eval_quality_calc', 'cq_eval_score_level', 'cq_eval_result_enum'],
  data() {
    return {
      SCORE_TYPE,
      TJ_SCORE_TYPE: TJ_SCORE_TYPE,
      JZ_SCORE_TYPE: JZ_SCORE_TYPE,
      list: []
    }
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        console.log(val)
        this.initData()
      }
    }
  },
  methods: {
    monseoverItem(event) {
      console.log(event)
      console.log(event.target.getBoundingClientRect())
    },
    clickItem(item, type) {
      // console.log(item)
      // console.log(type)
      if (item.children && item.children.length === 0 || !item.children) {
        this.$emit('clickScore', item)
      }
      if (type) { // 点击高层、别墅
        try {
          item = JSON.parse(JSON.stringify(item))
          const list = [item, ...item.children]
          list.forEach(item => {
            delete item.children
          })
          type.list = list
          this.$emit('clickScore', type)
        } catch (e) {
          console.error(e)
        }
      }
    },
    initData() {
      const cfgInfo = this.cfg || {}
      const cfgs = cfgInfo.children || []
      const evalScore = this.value || {}
      let scores = JSON.parse(JSON.stringify(evalScore.scores || []))
      // 甩项不展示
      if (!this.showThrowTerm) scores = scores.filter(i => i.scoreResult !== RESULT.THROWTERM)

      if (!cfgs.length || !scores.length) return (this.list = [])

      const cfgMap = cfgs.reduce((o, i) => !void (o[i.chkitemCode] = i) && o, {})

      scores.map(i => {
        const cfg = cfgMap[i.chkitemCode]
        if (!cfg) return

        const {dataType, scoreType, addsubObj} = cfg
        i.chkitemName = cfg.chkitemName
        i.seq = cfg.seq || 0
        i.showDataType = 'num'

        if (i.scoreResult === RESULT.THROWTERM) {
          i.showDataType = 'isThrowTerm'
          return
        }
        if (addsubObj) {
          i.showDataType = 'addsubObj'
          i.isSub = scoreType === SCORE_TYPE.SUB

          const arr = addsubObj.split(',').filter(i => i)
          i.showBuss = arr.includes(ADDSUB_OBJ.BUSSNIESS)
          i.showCity = arr.includes(ADDSUB_OBJ.CITY)
          i.showPro = arr.includes(ADDSUB_OBJ.PROJECT)
          return
        }
        if (dataType === DATA_TYPE.ENUM) {
          i.showDataType = 'enum'
          i.enumDicts = cfg.enumDicts || []
          return
        }
      })
      this.list = scores

      this.$nextTick(() => {
        // console.log(this.$refs.scorePopoverRef)
        this.$refs.scorePopoverRef.forEach(item => {
          item.updatePopper()
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .m-l-sm {
    margin-left: 10px;
  }

  .flex-x-center {
    display: flex;
    align-items: center;
  }

  .muted {
    color: #606266;
  }

  .red {
    color: #f56c6c;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    color: #303133;
  }

  .item {
    max-width: 250px;
    background-color: #f5f7fa;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 0 5px 5px 0;
    cursor: pointer;

    &:hover {
      background-color: #ffffff;
    }

    &.is-ellipsis {
      .remark {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .label {
    max-width: 100%;
    display: inline-block;
    padding: 3px 5px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1;
    color: white;
    background-color: #838a9d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .addsub-score {
    .remark {
      color: #606266;
      font-size: 12px;
      line-height: 1.2;
      zoom: 0.9;
      border-left: 5px solid #dcdfe6;
      padding: 2px 0 2px 4px;
      margin: 4px 0 10px;
    }
  }

  .material-tab {
    .material-item {
      padding: 6px 10px;
      margin: 0 10px;
    }
  }

  .material-item {
    display: inline-block;
    text-align: center;
    padding: 2px 10px;
    color: #909399;
    border: 1px currentColor dashed;
    border-radius: 4px;
    vertical-align: top;
  }

  .item-cursor {
    cursor: pointer;

    &:hover {
      /*color: #409EFF;*/
    }
  }

  .item-special {
    .material-item-type {
      display: flex;

      .type-line {
        border-right: 1px currentColor dashed;
        margin: -6px 10px;
      }

      .gc-bs {
        cursor: pointer;
      }

      .label-value {
        text-align: left;

        span:nth-child(1) {
          margin-right: 10px;
        }

        &:hover {
          color: #409EFF;
        }
      }
    }
  }

  .green {
    color: #67c23a;
  }

  .blue {
    color: #409eff;
  }

  .red {
    color: #f56c6c;
  }
</style>
